<template>
  <div class="container">
    <div class="container-1200">
      <!-- 顶部新闻 -->
      <div class="topNews flex justify-between align-center">
        <div class="flex align-center">
          <img src="../assets/image/index/news.png" height="52" width="60"/>
          <i class="newsTitle">{{ topNews.title }}</i>
        </div>
      </div>
      <!-- banner -->
      <div class="banner flex justify-between align-center flex-wrap">
        <div class="bannerItem">
          <el-carousel trigger="click">
            <el-carousel-item v-for="(item,index) in bannerList" :key="index">
              <img :src="item.image_url"/>
              <div class="bannerTitle">{{item.title}}</div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="bannerItem bannerList">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in bannerNews" :key="index" :label="item.title" :name="'name'+index">
              <span slot="label" class="tabtitle flex align-center">
                <i class="iconfont" v-if="activeName == 'name'+index">&#xe7d7;</i>
                <span class="span-box">
                  <span>{{ item.title }}</span>
                </span>
              </span>
              <div class="listPanel">
                <ul>
                  <li v-for="(item,index) in bannerNewsData" :key="index" @click="goDetail(item)"><div class="title">{{ item.title }}</div><i class="time">{{ item.timeY }}</i></li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <!-- 政务公开 -->
    <div class="public">
      <div class="container-1200">
        <div class="publicTab flex justify-around align-start">
          <div class="publicItem" v-for="item in 3" :key="item" @click="changePublic(item)">
            <img :src="publicId == item-1 ? tabImg[publicId+3] : tabImg[item-1]" width="180"/>
          </div>
        </div>
        <!-- 政务公开面板 -->
        <div class="publicPanel flex justify-between align-start flex-wrap" v-show="publicId == 0">
          <div class="leftPanel flex justify-between flex-wrap">
            <div class="leftTitle flex align-center"><i class="iconfont">&#xe7d1;</i>政府信息公开</div>
            <div class="leftItem"
                 v-for="(item,index) in publicIcon"
                 :key="index"
                 :class="{'isChose': publicItemId == index}"
                 @click="chosePublicIcon(index)">
              <div class="imgBox"><img :src="publicItemId == index ? chosedIcon[publicItemId].url : item.url" height="34px"></div>
              <i>{{item.title}}</i>
            </div>
          </div>
          <div class="rightPanel bannerList">
            <el-tabs v-model="publicName" @tab-click="publicClick">
              <el-tab-pane v-for="item in 1" :key="item" label="用户管理" name="name0">
              <span slot="label" class="tabtitle flex align-center">
                <i class="iconfont">&#xe8b9;</i>
                <span class="span-box">
                </span>
                  <span>政策解读</span>
              </span>
                <div class="listPanel">
                  <ul>
                    <li v-for="(item,index) in policyData" :key="index"><div class="title">{{ item.title }}</div><i class="time">{{ item.timeY }}</i></li>
                  </ul>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <!-- 网上办事 -->
        <div class="publicPanel" v-if="publicId == 1">
          <div class="flex justify-between align-start flex-wrap">
            <div class="secLeft"><img src="../assets/image/index/datusheng.png" height="323" width="676"/></div>
            <div class="leftPanel secIcons flex justify-between flex-wrap">
              <div class="leftTitle flex align-center"><i class="iconfont">&#xe900;</i>便民查询</div>
              <div class="leftItem"
                   v-for="(item,index) in netIcon"
                   :key="index"
                   :class="{'isChose': netItemId == index}"
                   @click="choseNetIconFn(item.uri,index)"
              >
                <div class="imgBox"><img :src="netItemId == index ? choseNetIcon[netItemId].url : item.url" height="34px"></div>
                <i>{{item.title}}</i>
              </div>
            </div>
          </div>
        </div>
        <!-- 政民互动 -->
        <div class="publicPanel flex justify-between align-start  flex-wrap" v-if="publicId == 2">
          <div class="leftPanel peopleLeft flex justify-between flex-wrap">
            <div class="leftTitle flex align-center"><i class="iconfont">&#xe653;</i>互动服务</div>
            <div class="leftItem"
                 v-for="(item,index) in peopleIcon"
                 :key="index"
                 :class="{'isChose': publicItemId == index}"
                 @click="chosePublicIcon(index)"
            >
              <div class="imgBox"><img :src="publicItemId == index ? chosedIcon[publicItemId].url : item.url" height="34px"></div>
              <i>{{item.title}}</i>
            </div>
          </div>
          <div class="rightPanel bannerList">
            <el-tabs v-model="activeName" @tab-click="publicClick">
              <el-tab-pane v-for="(item,index) in peopleTab" :key="index" label="用户管理" :name="'name'+(index+2)">
              <span slot="label" class="tabtitle flex align-center">
                <i class="iconfont">&#xe8b9;</i>
                <span class="span-box">
                  <span>{{ item.title }}</span>
                </span>
              </span>
              <div class="listPanel">
                <ul>
                  <li v-for="(item,index) in policyData" :key="index"><div class="title">{{ item.title }}</div><i class="time">{{ item.timeY }}</i></li>
                </ul>
              </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>

    <!-- 专题专栏 -->
    <div class="topic">
      <div class="container-1200 flex flex-wrap align-center">
        <div class="title  align-center flex justify-start"><i class="iconfont">&#xe646;</i>专题专栏</div>
        <swiper class="swiper" ref="swiper" :options="swiperOption">
          <swiper-slide class="swiperItem flex justify-center align-center" v-for="(item,index) in topicList" :key="index">
            <img :src="item.image_url">
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        <swiper class="swiper2" ref="swiper" :options="swiperOption2">
          <swiper-slide class="swiperItem flex justify-center align-center" v-for="(item,index) in topicList" :key="index">
            <img :src="item.image_url">
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>

    <!-- 政务平台 -->
    <div class="service">
      <div class="container-1200 flex justify-between align-center flex-wrap">
        <div class="servicePanel">
          <div class="title flex align-center"><i class="iconfont">&#xe635;</i>政务平台</div>
          <div class="serviceContainer flex justify-between align-center">
            <div class="serviceItem org" v-for="(item,index) in zwList" :key="index" @click="openOutUrl(item.uri)">
              <div class="imgBox">
                <i class="iconfont" v-if="index == 0">&#xe6d0;</i>
                <i class="iconfont" v-if="index == 1">&#xe617;</i>
                <i class="iconfont" v-if="index == 2">&#xe7af;</i>
                <i class="iconfont" v-if="index == 3">&#xe628;</i>
              </div>
              <i>{{ item.title }}</i>
            </div>
          </div>
        </div>
        <div class="servicePanel">
          <div class="title flex align-center"><i class="iconfont">&#xe616;</i>应用系统</div>
          <div class="serviceContainer flex justify-between align-center">
            <div class="serviceItem" v-for="(item,index) in appSysList" :key="index" @click="openOutUrl(item.uri)">
              <div class="imgBox">
                <i class="iconfont" v-if="index == 0">&#xe90c;</i>
                <i class="iconfont" v-if="index == 1">&#xe885;</i>
                <i class="iconfont" v-if="index == 2">&#xe904;</i>
                <i class="iconfont" v-if="index == 3">&#xe6bd;</i>
              </div>
              <i>{{ item.title }}</i>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  name: 'index',
  data () {
    return {
      data: '',
      topNews: '',
      bannerList: '',
      activeName: 'name0',
      publicName: 'name0',
      publicId: 0,
      publicItemId: 0,
      netItemId: 0,
      bannerNewsData: '',
      topicList: '',  //专题专栏
      policyData: '', //政策解读、便民问答、专家答疑
      bannerNews: [
        {id:1, title: '通知公告'},
        {id:6, title: '国务院'},
        {id:2, title: '教育部'},
        {id:3, title: '教育厅'},
        {id:4, title: '市县区'},
        {id:5, title: '学校'},
      ],
      peopleTab: [
        {id:3, title: '便民服务'},
        {id:2, title: '专家答疑'},
      ],
      tabImg: [
        require('../assets/image/index/public-light.png'),
        require('../assets/image/index/netWork-light.png'),
        require('../assets/image/index/exchange-light.png'),
        require('../assets/image/index/public.png'),
        require('../assets/image/index/netWork.png'),
        require('../assets/image/index/exchange.png'),
      ],
      publicIcon: [
        { url:require('../assets/image/index/slzc.png'), title: '政策'},
        { url:require('../assets/image/index/slzn.png'), title: '信息公开指南'},
        { url:require('../assets/image/index/slzd.png'), title: '信息公开制度'},
        { url:require('../assets/image/index/slpt.png'), title: '法定主动公开内容'},
        { url:require('../assets/image/index/slnb.png'), title: '信息公开年报'},
        { url:require('../assets/image/index/slyf.png'), title: '已申请公开'},
      ],
      chosedIcon: [
        { url:require('../assets/image/index/zc.png'), title: '政策'},
        { url:require('../assets/image/index/zn.png'), title: '信息公开指南'},
        { url:require('../assets/image/index/zd.png'), title: '信息公开制度'},
        { url:require('../assets/image/index/pt.png'), title: '法定主动公开内容'},
        { url:require('../assets/image/index/nb.png'), title: '信息公开年报'},
        { url:require('../assets/image/index/yf.png'), title: '已申请公开'},
      ],
      netIcon:[
        { url:require('../assets/image/index/slgl.png'), title: '各类考试成绩及录取结果', uri: 'https://www.lzk.hl.cn/cxzx/'},
        { url:require('../assets/image/index/slgk.png'), title: '高考成绩及结果', uri: 'https://www.lzk.hl.cn/gkcx/'},
        { url:require('../assets/image/index/slzk.png'), title: '自考查询', uri: 'https://zxks.hljea.org.cn/kszzfw/home/login'},
        { url:require('../assets/image/index/slby.png'), title: '中职学校毕业证书', uri: 'http://113.4.156.189:9080/byzcxtz'},
        { url:require('../assets/image/index/slxl.png'), title: '高等教育学历证书', uri: 'https://www.chsi.com.cn/xlcx/'},
        { url:require('../assets/image/index/slyy.png'), title: '大学英语四六级考试成绩', uri: 'http://app.gjzwfw.gov.cn/jmopen/webapp/html5/jybsljksdccjcx/index.html'},
        { url:require('../assets/image/index/sldj.png'), title: '全国英语等级考试', uri: 'http://cjcx.neea.edu.cn/html1/folder/1508/206-1.htm?sid=280'},
        { url:require('../assets/image/index/sljs.png'), title: '全国计算机等级考试', uri: 'http://cjcx.neea.edu.cn/html1/folder/1508/206-1.htm?sid=300'},
      ],
      zwList:[
        { title: '公文交换平台', uri: 'http://gw.hljedu.gov.cn/edoas2/login.jsp'},
        { title: '办公平台', uri: 'http://oa.hljedu.gov.cn/'},
        { title: '信息报送', uri: ''},
        { title: '处室网站', uri: ''},
      ],//政务平台
      appSysList:[
        { title: '全国中等职业学校学生管理信息系统', uri: 'http://zzxs.hljedu.gov.cn/'},
        { title: '全国学生资助管理信息系统', uri: 'http://xszz.hljedu.gov.cn/'},
        { title: '省教材教辅征订辅助管理平台', uri: 'http://www.hljjyzd.cn/login.asp'},
        { title: '全国学生资助管理信息系统', uri: 'http://xjw.hljedu.gov.cn/'},
      ],//应用系统
      choseNetIcon:[
        { url:require('../assets/image/index/gl.png'), title: '各类考试成绩及录取结果'},
        { url:require('../assets/image/index/gk.png'), title: '高考成绩及结果'},
        { url:require('../assets/image/index/zk.png'), title: '自考查询'},
        { url:require('../assets/image/index/by.png'), title: '中职学校毕业证书'},
        { url:require('../assets/image/index/xl.png'), title: '高等教育学历证书'},
        { url:require('../assets/image/index/yy.png'), title: '大学英语四六级考试成绩'},
        { url:require('../assets/image/index/dj.png'), title: '全国英语等级考试'},
        { url:require('../assets/image/index/js.png'), title: '全国计算机等级考试'},
      ],
      peopleIcon: [
        { url:require('../assets/image/index/slzc.png'), title: '政策'},
        { url:require('../assets/image/index/slzn.png'), title: '信息公开指南'},
        { url:require('../assets/image/index/slzd.png'), title: '信息公开制度'},
        { url:require('../assets/image/index/slpt.png'), title: '法定主动公开内容'},
      ],
      swiperOption: {
        slidesPerView: 5,
        spaceBetween: 0,
        direction: 'horizontal',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          resize: () => {
            this.$refs.swiper.$swiper.changeDirection(
                window.innerWidth <= 960
                    ? 'vertical'
                    : 'horizontal'
            )
          }
        }
      },
      swiperOption2: {
        slidesPerView: 1,
        spaceBetween: 30,
        keyboard: {
          enabled: true,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted(){
    this.getData();
    this.getBannerNews(1)
    this.getMidList(1)
    this.getTopicData(1)
  },
  methods: {
    //通知公告
    async getData() {
      const res = await this.$http.get("/api/tab/list/headline");
      if (res.code == 200) {
        this.data = res.data;
        this.topNews = res.data.head
        this.bannerList = res.data.carousel
      }
    },
    // banner新闻
    async getBannerNews(id) {
      const res = await this.$http.get("/api/index/tab",{
        type: id
      });
      if (res.code == 200) {
        this.bannerNewsData = res.data;
      }
    },

    //专题专栏
    async getTopicData() {
      const res = await this.$http.get("/api/web/column");
      if (res.code == 200) {
        console.log(res.data)
        this.topicList = res.data
      }
    },
    // 1政务公开 2便民问答 3专家答疑
    async getMidList(id) {
      const res = await this.$http.get("/api/index/policy",{
        type: id
      });
      if (res.code == 200) {
        this.policyData = res.data;
      }
    },
    handleClick(tab) {
      this.activeName = 'name'+tab.index
      this.getBannerNews(this.bannerNews[tab.index].id)
    },
    publicClick(tab) {
      if(this.publicId == 2){
        this.publicName = 'name' + (tab.index*1+1)
        this.getMidList(tab.index*1+2);
      }else {
        this.publicName = 'name'+tab.index
        this.getMidList(tab.index*1+1)
      }
    },
    goDetail(item){
      if(item.jump_url != ''){
        window.open(item.jump_url)
      }else {
        console.log('跳转站内 id :' + item.id)
      }
    },
    changePublic(id){
      this.publicId = id-1
      if(id == 1){
        this.publicName = 'name0'
        this.getMidList(1)
      }
      if(id == 3){
        this.activeName = 'name2'
        this.getMidList(2)
      }
    },
    chosePublicIcon(id){
      this.publicItemId = id;
      // this.$router.push('/detail/list')
      const rou = this.$router.resolve({path: '/detail/list', params: {id: id}})
      window.open(rou.href,'_blank')
    },
    choseNetIconFn(uri,id){
      this.netItemId = id;
      window.open(uri)
    },
    openOutUrl(url){
      window.open(url)
    }

  },
  watch: {
  },
  components: {
    swiper,
    swiperSlide
  },
}
</script>

<style>
.el-carousel__container{
  margin-top: 0 !important;
}
.el-tabs__item.is-active{
  margin-top: 2px;
}
.el-carousel__indicators--horizontal{
  width: 100%;
  background: rgba(0,0,0,.5);
  position: absolute;
  /*right: 30px !important;*/
  transform: none;
  left: unset;
  display: flex;
  justify-content: flex-end;
  padding-right: 10px;
}
.el-carousel__button{
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.el-carousel__indicator.is-active button{
  width: 30px;
  background: #2c64ff;
  border-radius: 6px;
}
.el-tabs__item{
  padding: 0 10px;
  font-size: 18px;
  line-height: 60px;
  height: 62px;
}
.el-tabs__item.is-active{
  color: #2c64ff;
}
.el-tabs__active-bar{
  background: #2c64ff;
}
.swiper-button-prev{
  width: 26px;
  height: 13px;
  margin-top: -7px;
}
.swiper-button-prev, .swiper-button-next{
  width: 26px;
  height: 13px;
  margin-top: -7px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
  left: 0;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
  right: 0;
}

@media screen and (max-width: 600px){
  .el-carousel__container{
    height: 187px;
  }
  .el-tabs__item{
    line-height: unset;
    height: 30px;
    font-size: 14px;
  }
  .el-tabs__nav-next, .el-tabs__nav-prev{
    line-height: 20px;
  }
}
</style>
<style lang="scss" scoped>
  .container{
    overflow: hidden;
    .topNews{
      width: 100%;
      height: 100px;
      .more{
        font-size: 18px;
        color: #908e8e;
      }
      .newsTitle{
        font-size: 24px;
        color: #2c64ff;
        font-weight: bold;
        margin-left: 24px;
      }
    }
    .banner{
      .bannerItem{
        min-width: 375px;
        height: 300px;
        width: 50%;
        //height: 320px;
        background-color: #f6f8ff;
        overflow: hidden;
        .bannerTitle{
          position: absolute;
          bottom: 0px;
          left: 10px;
          color: #ffffff;
          line-height: 34px;
          width: 80%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          z-index: 9;
          text-align: left;
        }
        img{
          width: 100%;
          height: 100%;
        }
        .tabtitle{
          .iconfont{
            font-size: 22px;
          }
        }
        .listPanel{
          padding-left: 20px;
          ul{
            li {
              list-style: disc;
              line-height: 36px;
              font-size: 18px;
              font-weight: 500;
              color: #333333;
              cursor: pointer;
              position: relative;
              &:hover{
                color: #2c64ff;
              }
              .title{
                width: 80%;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .time{
                position: absolute;
                right: 10px;
                font-size: 14px;
                line-height: 36px;
                float: left;
              }
            }
          }
        }
      }
      .bannerList{
        padding: 6px 20px;
        text-align: left;
      }
    }
    .public{
      margin-top: 96px;
      background: #f6f8ff;
      width: 100%;
      height: 420px;
      .publicTab{
        width: 610px;
        margin: auto;
        transform: translateY(-46px);
        cursor: pointer;
      }
      .publicPanel{
        width: 100%;
        .secLeft{
          width: 676px;
          height: 322px;
          border-radius: 10px;
          overflow: hidden;
        }
        .leftPanel{
          width: 330px;
          .leftTitle{
            text-align: left;
            width: 100%;
            line-height: 60px;
            color: #2c64ff;
            font-weight: bold;
            .iconfont{
              font-size: 24px;
              font-weight: normal;
            }
          }
          .leftItem{
            width: 90px;
            //height: 110px;
            border-radius: 6px;
            cursor: pointer;
            margin-bottom: 30px;
            padding: 10px 4px;
            .imgBox{
              width: 100%;
              margin-bottom: 18px;
            }
            i{
              font-size: 18px;
              line-height: 20px;
              color: #2c64ff;
              font-weight: normal;
            }
            &.isChose{
              background: #2c64ff;
              i{
                color: #ffffff;
              }
            }
          }
        }
        .peopleLeft{
          width: 240px;
        }
        .secIcons{
          width: 500px;
          .leftItem{
            width: 100px;
            margin-right: 20px;
            i{
              font-size: 14px;
            }
          }
        }
        //.rightPanel{
          .rightPanel{
            flex: 1;
            height: 320px;
            background-color: #f6f8ff;
            overflow: hidden;
            margin-left: 30px;
            .tabtitle{
              .iconfont{
                font-size: 22px;
              }
            }
            .listPanel{
              padding-left: 20px;
              ul{
                li {
                  list-style: disc;
                  line-height: 36px;
                  font-size: 18px;
                  font-weight: 500;
                  color: #333333;
                  cursor: pointer;
                  position: relative;
                  &:hover{
                    color: #2c64ff;
                  }
                  .title{
                    width: 80%;
                    float: left;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: left;
                  }
                  .time{
                    position: absolute;
                    right: 10px;
                    font-size: 14px;
                    line-height: 36px;
                    float: left;
                  }
                }
              }
            }
          }
        //}
      }
    }
    .topic{
      height: 150px;
      .title{
        width: 100%;
        text-align: left;
        color: #2c64ff;
        font-size: 20px;
        font-weight: bold;
        i{
          font-weight: normal;
          font-size: 24px;
          margin-right: 5px;
        }
      }
      .swiper{
        width: 100%;
        overflow: hidden;
        .swiperItem{
          width: 200px;
          height: 60px;
          img{
            width: 200px;
          }
        }
      }
      .swiper2{
        display: none;
      }
    }
    .service{
      height: 220px;
      background-color: #f6f8ff;
      .servicePanel{
        width: 46%;
        .title{
          i{
            font-size: 24px;
            font-weight: normal;
            margin-right: 10px;
          }
          font-size: 20px;
          line-height: 30px;
          color: #2c64ff;
          text-align: left;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .serviceItem{
          //width: 100px;
          padding: 16px 10px;
          color: #2c64ff;
          line-height: 20px;
          border-radius: 6px;
          font-size: 14px;
          cursor: pointer;
          .iconfont{
            font-size: 36px;
          }
          .imgBox{
            margin-bottom: 10px;
          }
          &:hover{
            background: #2c64ff;
            color: #ffffff;
          }
        }
        .org{
          font-size: 16px;
        }
      }
    }
  }

  @media screen and (max-width: 600px) {
    .logo{
      width: 80%;
    }
    .bannerItem{
      &:first-child{
        height: auto !important;
      }
    }
    .secLeft{
      display: none;
    }
    .leftItem{
      margin-right: 0 !important;
    }
    .topNews{
      width: 100%;
      height: 50px !important;
      padding: 0 20px;
      line-height: 18px;
      display: none;
      i{
        max-width: 80%;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      img{
        width: 30px;
        height: 30px;
      }

      .newsTitle{
        font-size: 14px !important;
      }
    }
    .topic{
      padding: 0 20px;
      .title{
        font-size: 16px !important;
      }
    }
    .listPanel{
      .title{
        width: 75% !important;
        font-size: 14px;
      }
    }
    .public{
      margin-top: 50px !important;
      height: unset !important;
      .publicTab{
        width: 100% !important;
        transform: translateY(-50%) !important;
        .publicItem{
          img{
            width: 100px;
          }
        }
      }
      .leftPanel{
        width: 100% !important;
        padding: 0 20px;
        .leftItem{
          transform: scale(.8);
          margin-bottom: 0 !important;
        }
      }
      .rightPanel{
        width: 100%;
        padding: 0 20px;
        flex: unset !important;
        margin-left: 0 !important;
      }
    }
    .swiper{
      display: none;
    }
    .swiper2{
      display: unset !important;
      height: 88px !important; ;
      img{
        width: 300px !important;
      }
    }
    .swiper-button-prev, .swiper-button-next{
      width: 50px !important;
      height: 20px !important;
      top: 50px;
      right: -10px;
      outline: none;
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
      left: -10px;
      outline: none;
    }
    .service{
      height: unset !important;
      .servicePanel{
        padding: 10px 20px;
        width: 100% !important;
        .title{
          font-size: 16px !important;
        }
        i{
          font-size: 18px !important;
        }
        .serviceItem{
          i{
            font-size: 12px !important;
          }
          .iconfont{
            font-size: 24px !important;
          }
        }
      }
    }
  }
</style>
